import React from 'react';
import { TabBar } from 'antd-mobile';
import { Link } from "react-router-dom";
class TabBarComponents extends React.Component {
  constructor(props) {
    // 继承父组件
    super(props);
    this.state = {
      // 接受父组件传的属性
      selectedTab: props.page,
      parentElm: props.elm,
      hidden: false,
      fullScreen: false,
    };
  }
  componentDidMount() {
    // console.log(this.props)
  }

  componentWillReceiveProps (ele) {
    // console.log('componentWillReceiveProps')
  }

  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '10px', textAlign: 'center' }}>
        <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
      </div>
    );
  }

  receiveParentContent(elm) {
    return (
      <div style={{ backgroundColor: 'white', height: '10px', textAlign: 'center' }}>
        <div style={{ paddingTop: 60 }}>
          {elm}
        </div>
      </div>
    );
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 50 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
          tabBarPosition="top"
        >
          <TabBar.Item
            title="Life"
            key="Life"
            icon={
              <Link to='/index'>
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat' }}
                />
              </Link>
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'indexTab'}
            badge={1}
            onPress={() => {
              this.setState({
                selectedTab: 'indexTab',
              });
            }}
            data-seed="logId"
          >
            {/* {this.renderContent('Life')} */}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <Link to='/koubei'>
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat' }}
                />
              </Link>
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat' }}
              />
            }
            title="Koubei"
            key="Koubei"
            badge={'new'}
            selected={this.state.selectedTab === 'koubei'}
            onPress={() => {
              this.setState({
                selectedTab: 'koubei',
              });
            }}
            // data-seed="logId1"
          >
            {/* {this.renderContent('Koubei')} */}
          </TabBar.Item>
          <TabBar.Item
            icon={
                <Link to='/friend'>
                    <div style={{
                        width: '22px',
                        height: '22px',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat' }}
                    />
                </Link>
            }
            selectedIcon={
                <div style={{
                    width: '22px',
                    height: '22px',
                    background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat' }}
                >
                </div>
            }
            title="Friend"
            key="Friend"
            selected={this.state.selectedTab === 'friend'}
            onPress={() => {
              this.setState({
                selectedTab: 'friend',
              });
            }}
          >
            {/* {this.receiveParentContent(this.state.parentElm)} */}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <Link to='/my'>
                  <div style={{
                      width: '22px',
                      height: '22px',
                      background: 'url(https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg) center center /  21px 21px no-repeat' }}
                  />
              </Link>
            }
            selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg' }}
            title="My"
            key="my"
            selected={this.state.selectedTab === 'mypage'}
            onPress={() => {
              this.setState({
                selectedTab: 'mypage',
              });
            }}
          >
            {/* {this.renderContent('My')} */}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default TabBarComponents;